<template>
    <div class="headers">
        <div class="habar-box">
            <Icons :type="toggle ? 'liebiaozhankai1-copy' : 'liebiaoshousuo-copy'" 
                color="#B4C2CC" 
                class="toggle-icon"
                @click="doToggle"
                ></Icons>
                <Breadcrumb v-if="BreadcrumbList.length">
                    <BreadcrumbItem :to="item.route" v-for="(item, i) in BreadcrumbList" :key="i">{{item.name}}</BreadcrumbItem>
                </Breadcrumb>
        </div>
        <div class="user-control-box">
             <span class="msg" @click="$router.push('/home/msg')">消息</span>
             <span class="setting" @click="$router.push('/home/setting')">设置</span>
             <Dropdown>
                <span >
                    <img :src="logos" alt=""> <span class="compamy-name">浙江亚雀科技有限公司</span>
                </span>
                <DropdownMenu slot="list">
                    <DropdownItem >
                    <div @click="$router.push('/home/setting/company-msg')"><Icons type="qiyexinxi"></Icons>企业信息</div></DropdownItem>
                    <DropdownItem>
                        <div @click="loginOut"><Icons type="tuichudenglu"></Icons>退出账号</div>
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import {resetView, removeDb} from '@/js/common'
export default {
    name: 'Headers',
    data () {
        return {
            logos: require('../../assets/companyLogo.png')
        }
    },
    computed: {
        ...mapGetters({
            toggle: 'common/getToggle'
        }),
        BreadcrumbList () {
            let {matched} = this.$route
            let arr = []
            for (let k = 0; k < matched.length; k++) {
                if (k > 0 && !matched[k].meta.baiseRouter) {
                    arr.push({
                        name: matched[k].meta.title,
                        route: matched[k].path
                    })
                }
            }
            return arr
        }
    },
    created () {
    },
    methods: {
        ...mapActions({
            changeToggle: 'common/changeToggle'
        }),
        doToggle () {
            this.changeToggle(!this.toggle)
            resetView()
        },
        loginOut () {
            this.$Message.success('退出成功')
            removeDb('userName')
            removeDb('token')
			this.$router.push('/login')
        }
    }
}
</script>
<style scoped lang="less">
.headers {
    height: 60px;
    width: 100%;
    background: #fff;
    line-height: 60px;
    box-shadow:0px 3px 3px 0px rgba(12,82,140,0.05);
    padding: 0 20px;
    display:flex;
    .toggle-icon {
        cursor: pointer;
    }
    .habar-box {
        width: 400px;
        display: flex;
        .ivu-breadcrumb {
            padding-left: 16px;
            /deep/ span {
                color: #333;
                &:last-child {
                    a {
                        color: #999;
                    }
                }
                .ivu-breadcrumb-item-separator{
                    margin: 0;
                }
            }
        }
    }
    .user-control-box {
        flex: 1;
        text-align: right;
        > span {
            font-size: 14px;
            color: #333;
            margin-right: 40px;
            cursor: pointer;
            &:last-child {
                margin-right: 0;
            }
            
            .change-toggle {
                display: inline-block;
                width: 64px;
                height: 30px;
                background: #EAF6FF;
                border-radius: 15px;
                line-height: 30px;
                text-align: center;
                margin-left: 8px;
                font-size: 14px;
                color: #1298FC;
            }
        }
        
        img {
            display: inline-block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
        }
        i{
            font-size: 14px;
            margin-right: 10px;
        }
    }
}
</style>